import React from 'react'
import { Tab, TabBody, TabBar, TabBarItem, TabBarIcon, TabBarLabel } from 'react-weui'
import { browserHistory } from 'react-router';

export default class IndexTabBar extends React.Component {
	constructor(props) {
		super(props)
		this.state = {
			tab: 0
		}
	}
	componentDidMount() {
        const storeId = this.props.storeId;
		switch(this.props.pathName) {
			case `/store/${storeId}`: this.setState({tab:0});break;
			case `/store/${storeId}/sort`: this.setState({tab:1});break;
			case `/store/${storeId}/shopping-cart`: this.setState({tab:2});break;
			case `/store/${storeId}/user`: this.setState({tab:3});break;
		}
	}
	render() {
        const { storeId } = this.props;
		return (
                <TabBar style={{ position: 'fixed', bottom: 0}}>
                    <TabBarItem
                        active={this.state.tab == 0}
                        onClick={e=>{browserHistory.push(`/store/${storeId}`);this.setState({tab:0});}}
                        icon={<i className="iconfont icon-wxbzhuye"></i>}
                        label="首页"
                    />
                    <TabBarItem active={this.state.tab == 1} onClick={e=>{browserHistory.push(`/store/${storeId}/sort`);this.setState({tab:1});}}>
                        <TabBarIcon>
                           <i className="iconfont icon-category"></i>
                        </TabBarIcon>
                        <TabBarLabel>分类</TabBarLabel>
                    </TabBarItem>
                    <TabBarItem
                        active={this.state.tab == 2}
                        onClick={e=>{browserHistory.push(`/store/${storeId}/user/shopping-cart`);this.setState({tab:2});}}
                        icon={<i className="iconfont icon-cart"></i>}
                        label="购物车"
                    />
                    <TabBarItem
                        active={this.state.tab == 3}
                        onClick={e=>{browserHistory.push(`/store/${storeId}/user`);this.setState({tab:3});this.setState({tab:3})}}
                        icon={<i className="iconfont icon-account"></i>}
                        label="个人中心"
                    />
                </TabBar>
		);
	}
}
